import React, { useState, useEffect } from "react";
import { Select, Tooltip } from "antd"; // 假设你正在使用Ant Design的Select组件
import { queryTakeUserList } from "./service";
const { Option } = Select;
import { isEmpty } from "lodash";

const TakeGoodsSelect = ({ value, params = {}, valueKey='id', placeholder="拿货员", onChange }) => {
	const [data, setData] = useState([]);

	useEffect(() => {
		handleUserList();
	}, []);
	useEffect(() => {}, [value]);

	const renderSubUser = item => {
		if (item.name) {
			if (item.account) {
				return item.name + "(" + item.account + ")";
			} else {
				return item.name;
			}
		} else {
			return "";
		}
	};
	const options =
		!isEmpty(data) &&
		data.map(item => (
			<Option key={item[valueKey]}>
				<Tooltip title={renderSubUser(item)}>{renderSubUser(item)}</Tooltip>
			</Option>
		));
	const handleUserList = async () => {
		const { data, success } = await queryTakeUserList(params);
		if (success) {
			setData(data);
		}
	};

	return (
		<>
			<Select
				showSearch
				onChange={onChange}
				value={value}
				allowClear
				placeholder={placeholder}
				filterOption={(input, option) => {
					return option.children.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
				}}
			>
				{options}
			</Select>
		</>
	);
};

export default TakeGoodsSelect;
